<template>
	<view class="count poRel">
		<view class="poFix wid100" style="background: #e9ffe4;top: 0;z-index: 11;">
			<!-- 状态栏高度 -->
			<view :style="{ height: `${statusBarHeight}px` }"></view>
			<!-- 自定义导航栏高度 并 居中 -->
			<view class="dis disAl disJuC poRel" :style="{height: `${barHeight}px`}">
				<view class="poAbs" style="width: 32rpx;height: 32rpx;left: 22rpx;" @click="fanhui()">
					<image src="../../../static/fanhui.png" class="wh100"></image>
				</view>
				<view class="foSi35" style="line-height: 36rpx;">新人福利</view>
			</view>
		</view>
		<view :style="{ height: `${statusBarHeight+barHeight}px` }"></view>
		<view :style="{ backgroundImage: 'url('+urlImage+'/wechatimg/b1.png);',height: `calc(100vh - ${statusBarHeight+barHeight}px);` }" 
			class="poRel" style="z-index: 2;box-sizing: border-box;background-size: 100% 100%;">
			<view style="height: 550rpx;"></view>
			<view class="wid90 mar borRad20 bacFFF" style="border: 4rpx solid #FFC943;padding: 45rpx 0;">
				<view class="textCen foSi45 fowe800" style="color: #FA4928;">- 新人福利 -</view>
				<scroll-view style="max-height: 366rpx;" class="wid100" scroll-y="true" @scrolltolower="lower">
					<view class="hei20"></view>
					<view v-if="list.length == 0" class="wid90 mar fowe800 foSi35">
						<view style="height: 20rpx;"></view>
						<view class="dis disJuC">
							<image src="../../../static/zanwu.png" style="width: 200rpx;height: 150rpx;"></image>
						</view>
						<view class="textCen mar-top20" style="color: #868686;">暂无数据</view>
					</view>
					<block v-for="(item,index) in list" :key="index">
						<view class="mar mar-top10 dis bei" :style="'background-image: url('+urlImage+'/wechatimg/b2.png);'"
							style="box-sizing: border-box;background-size: 100% 100%;">
							<view class="dis disAl disJuC" style="width: 204rpx;">
								<view class="foSi30" style="vertical-align: bottom;color: #D9372C;">
									<span>¥</span>
									<span class="fowe600 foSi40">{{item.money}}</span>
								</view>
							</view>
							<view class="dis disAl disJuC" style="width: 475rpx;">
								<view class="wid85 dis disAl disJuB">
									<view>
										<view class="foSi35" style="color: #515151;">{{item.title}}</view>
										<view class="foSi20 mar-top20" 
											style="color: #868686;">使用时间：5.20-5.27</view>
										<!-- <view v-if="item.is_spec == 0" class="foSi20 mar-top20"
											style="color: #868686;">使用时间：{{dateFormat(item.start)}} - {{dateFormat(item.end)}}</view> -->
									</view>
									<view v-if="item.receive_type == 0" class="dis disAl disJuC borRad40 coFFF foSi18 butt1" 
										style="background-color: #D9372C;" @click="lingqu(item)">立即领取</view>
									<view v-if="item.receive_type == 2" class="dis disAl disJuC borRad40 coFFF foSi18 butt1"
										style="background-color: #D09B6F;" @click="tiaozhuan('/pages/buy/buy')">去使用</view>
									<view v-if="item.receive_type == 1" class="dis disAl disJuC borRad40 coFFF foSi18 butt1"
										style="background-color: #959595;">已领完</view>
								</view>
							</view>
						</view>
					</block>
				</scroll-view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		mapState,
		mapActions
	} from 'vuex'
	import {
		utilMixins
	} from "@/common/util-mixins.js"
	import {
		getDw
	} from "@/common/wechat-util"
	import utils from '@/common/utils'
	export default {
		name: 'newWeal',
		data() {
			return {
				statusBarHeight: 0,
				barHeight: 0,
				list: [
					{title: '满199元使用',money: '10',is_spec: 1,receive_type:0},
					{title: '满199元使用',money: '10',is_spec: 1,receive_type:0},
					{title: '满199元使用',money: '10',is_spec: 1,receive_type:1},
					{title: '满199元使用',money: '10',is_spec: 1,receive_type:1},
					{title: '满199元使用',money: '10',is_spec: 1,receive_type:1},
				]
			}
		},
		async onLoad() {
			// 状态栏高度
			this.statusBarHeight = uni.getSystemInfoSync().statusBarHeight;
			// 胶囊数据
			const {
				top,
				height
			} = wx.getMenuButtonBoundingClientRect();
			// 自定义导航栏高度 = 胶囊高度 + 胶囊的padding*2, 如果获取不到设置为38
			this.barHeight = height ? height + (top - this.statusBarHeight) * 2 : 38;
			this.getList()
		},
		methods: {
			dateFormat(time) {
				let date = new Date(time*1000);
				let year = date.getFullYear();
				// 在日期格式中，月份是从0开始的，因此要加0，使用三元表达式在小于10的前面加0，以达到格式统一  如 09:11:05
				let month = date.getMonth() + 1;
				// let month = date.getMonth() + 1 < 10 ? "0" + (date.getMonth() + 1) : date.getMonth() + 1;
				let day = date.getDate() < 10 ? "0" + date.getDate() : date.getDate();
				let hours = date.getHours() < 10 ? "0" + date.getHours() : date.getHours();
				let minutes = date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes();
				let seconds = date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds();
				// 拼接
				return month+". "+day;
				// return year + "-" + month + "-" + day;
			},
			lingqu(item){
				var that = this;
				
			},
			baocun() {
				uni.downloadFile({
					url: 'https://img-home.csdnimg.cn/images/20240218021837.png',
					success: (res) => {
						if (res.statusCode === 200) {
							uni.saveImageToPhotosAlbum({
								filePath: res.tempFilePath,
								success: function() {
									uni.showToast({
										title: "保存成功",
										icon: "none"
									});
								},
								fail: function() {
									uni.showToast({
										title: "保存失败，请稍后重试",
										icon: "none"
									});
								}
							});
						}
					}
				})
			},
			async getList() {
				let {
					data
				} = await this.util.request({
					'url': this.api.hydj,
					data: {
						userId: uni.getStorageSync('userId')
					}
				})
				// this.list = data
				console.log(data)
			},
			fanhui() {
				uni.navigateBack(1)
			},
		}
	}
</script>

<style scoped lang="scss">
	.count {
		min-height: 100vh;
		background-color: #F6F6F6;
	}
	.butt1{
		width: 102rpx;
		height: 36rpx;
	}
	.bei{
		width: 590rpx;
		height: 177rpx;
	}
</style>